<template>
  <div class="course-card sound-item flex"
       @click="$emit('click-callback', item)">
    <img :src="type === 'audio' ? item.bigimg : item.bgimg"
         alt=""
         class="sound-item-img mr15">
    <div class="sound-item-detail flex-col jcb flex-1" :class="{'noPB':type==='audio'}">
      <div class="">
        <div class="sound-item-title lh1">
          {{item.name | filterTitle}}
        </div>
        <div class="sound-item-remark wot2">{{item.remark}}</div>
      </div>
      <div class="sound-item-other flex jcb aic">
        <div class="flex">
          <div class="sound-item-count flex aic">
            <img src="../images/audio_ico_07.png"
                 class="sound-item-ico-clock vam">{{item.resources_count||item.resource_count}}课时
          </div>
          <div class="sound-item-hot flex aic">
            <img src="../images/audio_ico_10.png"
                 class="sound-item-ico-eye vam">{{!isWx?item.hits+'次播放':(item.hits/10000).toFixed(2)+'万人在学'}}
          </div>
        </div>
        <div class="sound-item-btn tac flex aic jcc"
             :class="[type, {'is-wx': isWx}]"
             @click="$emit('btn-callback', item, $event.stopPropagation.bind($event))">
          <template v-if="type === 'video'">
            <img :src="icons[+!!item.is_collection]"
                 class="star vam" />
            <span :class="'' + !!item.is_collection">{{item.is_collection ? '已收藏' : '收藏'}}</span>
          </template>
          <span v-else>立即听</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CourseCard',
  filters: {
    filterTitle(text) {
      text = text.split(/[:：]/);
      // console.log(text);
      return text[1] || text[0];
    }
  },
  props: {
    item: {
      type: Object,
      default() {
        return {};
      }
    },
    type: {
      type: String,
      default: 'audio'
    },
    isWx: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      icons: [require('@/images/star_03.png'), require('@/images/star_07.png')]
    };
  }
};
</script>

<style scoped lang="less">
.sound-item {
  &-img {
    width: 5rem;
    height: 6.88rem;
    border-radius: 0.3rem;
  }
  &-detail {
    padding: 0.38rem 0;
    // height: 6.12rem;
  }
  .noPB{
      padding-bottom: 0;
  }
  &-title {
    margin-bottom: 6px;
    font-size: 0.9375rem;
    line-height: 1.12rem;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
  }
  &-remark {
    color: #999;
    font-size: 0.75rem;
    line-height: 1.12rem;
  }
  &-other {
    color: #b5b5b5;
    // margin-top: 6px;
    font-size: 0.69rem;
  }
  &-btn {
    width: 3.75rem;
    height: 1.5rem;
    color: #fff;
    background-color: #ff850b;
    border-radius: 1.5rem;
    &.is-wx {
      background-color: #17cff8;
    }
    &.video {
      width: auto;
      height: auto;
      background-color: transparent;
      .true {
        color: #ffbd23;
      }
      .false {
        color: #b5b5b5;
      }
    }
    .star {
      margin-right: 0.31rem;
      width: 0.78rem;
      height: 0.78rem;
    }
  }
  &-hot {
    margin-left: 0.97rem;
  }
  &-ico {
    &-clock {
      margin-right: 0.28rem;
      width: 0.75rem;
      height: 0.75rem;
    }
    &-eye {
      margin-right: 0.31rem;
      width: 0.91rem;
      height: 0.63rem;
    }
  }
}
</style>
